Как сделать не прямоугольную форму с одним фоном

[bob_24]

Нужно сделать как на картинке:

т.е. у прямоугольной формы еще и треугольник внизу. Но проблема в том что фон для них один. Можно увидеть как темная полоса продолжается на треугольнике. И конечно это не фиксированной ширины.)

Подскажите, можно ли такое реализовать?

[rash]

Не зная точных условий задачи могу предложить background-position: fixed; для обоих элементов.

Впрочем, можно думать и еще другие варианты, этот самый простой. Если не подойдет — пишите.

[psywalker]

Не зная точных условий задачи могу предложить background-position: fixed; для обоих элементов.

Впрочем, можно думать и еще другие варианты, этот самый простой. Если не подойдет — пишите.

Дружище, а ты не мог бы перечислить всевозможные варианты решения этой задачи. Мне для себя, для опыта. Да и другим думаю будет интересно.

[bob_24]

Первый раз слышу про background-position: fixed, может background-attachment: fixed? Но не совсем понимаю как оно мне поможет...

Что из точных условий нужно указать? например ссылка, с display:block. Текст может быть короткий или длинный и соответственно блок меняет ширину, а треугольник всегда по центру снизу, но фон должен быть один и для прямоугольника и для треугольника.

[rash]

Да, аттачмент, конечно.

Поможет тем, что задаст единую точку начала позиционирования фона. Таким образом рисунок будет совпадать в разных элементах так, как будто узор тайлится на одном и том же элементе.

Из условий — то, можем ли мы себе позволить не скроллить фон в этом случае.

[Softlink]

Про background-position: fixed; так и не смекнул, что за вариант. Но вот с трансформами вроде бы то что надо получается. Можно еще подумать

upd Одна поправочка. В моем случае надо еще иметь ввиду, что за фон под этим блоком. Если однородный, то no problem

Edited February 13, 2012 by Softlink

[bob_24]

Проблему решил

[Softlink]

Проблему решил

Как?

[bob_24]

Только несколько проще. Сделал фон с запасом по ширине. Добавил псевдоэлемент (сделать его треугольником не сложно). И для обоих элементов задал фон с позицией 50% 0

Ну это при условии, что треугольник известной ширины и стоит по центру. А это мне и надо

[Softlink]

Только несколько проще. Сделал фон с запасом по ширине. Добавил псевдоэлемент (сделать его треугольником не сложно). И для обоих элементов задал фон с позицией 50% 0

А можно код посмотреть? Здесь, например http://jsfiddle.net/

[bob_24]

вот, только не теугольник))

http://jsfiddle.net/jBbLL/ только не знаю, можно ли туда картинки добавлять

[Softlink]

вот, только не теугольник))

http://jsfiddle.net/jBbLL/ только не знаю, можно ли туда картинки добавлять

Да и фон как-то не так работает http://jsfiddle.net/Softlink/jBbLL/1/

[bob_24]

Да, работает только с повторяющимся фоном. Вот такой сферический блок в вакууме. Но мне подходит. А как сделать что-то более сложно пока не знаю)

А вообще да, было бы интересно знать как это сделать)))

Edited February 13, 2012 by bob_24

[Softlink]

Да, работает только с повторяющимся фоном. Вот такой сферический блок в вакууме. Но мне подходит. А как сделать что-то более сложно пока не знаю)

А вообще да, было бы интересно знать как это сделать)))

Ну такой вариант не подходит? http://jsfiddle.net/Softlink/hML5x/

[rash]

Дружище, а ты не мог бы перечислить всевозможные варианты решения этой задачи. Мне для себя, для опыта. Да и другим думаю будет интересно.

Мне только один еще приходит в голову так сразу, но он потребует дополнительной картинки.

Вот как-то так: http://jsfiddle.net/xCc4M/

UPD: да-да, уже предложены прекрасные варианты

[psywalker]

Спасибо братва, просветили лошару

[bob_24]

Softlink ну лично мне подходит, то что я написал. Твой вариант не подходит, потому что, как ты написал, фон должен быть однородным. Но все равно спасибо.

Можно наверное скрипт подключить, который бы брал высоту элемента и смещал фон у треугольника по y на минус эту высоту, но как то не очень это красиво.

Edited February 13, 2012 by bob_24

[Softlink]

Softlink ну лично мне подходит, то что я написал. Твой вариант не подходит, потому что, как ты написал, фон должен быть однородным. Но все равно спасибо.

Можно наверное скрипт подключить, который бы брал высоту элемента и смещал фон у треугольника по y на минус эту высоту, но как то не очень это красиво.

Да, весомый недостаток, согласен. Можно попробовать вариант rash'а, только если блок не будет тянуться в ширину на очень много.

Я еще сейчас подумаю посижу, интересная задачка

[bob_24]

По-моему у варианта Rash`a тоже есть проблемы с фоном)

Edited February 13, 2012 by bob_24

[Softlink]

bob_24, а высота фиксированная?

[bob_24]

Ну смотря на сколько ты себе хочешь усложнить вечер)) Если фикс, то можно отрицательный 'y' для фона треугольника, а если не фикс?

Edited February 13, 2012 by bob_24

[Softlink]

Все дело в том, что мы никак не можем задать треугольнику фон. Потому что я знаю пока только два способа, как сделать треугольник в такой ситуации. В первом бэкграунд не присутствует в принципе, а во втором его не подогнать.

[bob_24]

Если честно, то я что-то совсем забыл про то как делается треугольник и поэтому не учитывал невозможность добавить фон. Выходит, единственный способ сделать как надо возможен только тогда, когда однородный фон?

Edited February 13, 2012 by bob_24

[Softlink]

Наверное как-то можно извернуться, но мне пока ничего не приходит в голову.

У нас задача сопоставить фон и стрелку. Ключевое слово - центр. Значит мы можем через background-position:center зафиксировать фон у блока и картинкой приклеить стрелку. Таким образом у нас они всегда будут совпадать. Но тут задача делится, т.к. нам надо делать тянущиеся блоки. Вариантов два:

1) зафигачить вообще большой фон блоку

2) сделать подложку под блок, повторяя фон и попробовать выровнять это все дело через тот же background-position

Умнее пока ничего не придумал.

[psywalker]

Соорудили с Илюхой такой вариант, но походу дела в хроме не сочетается rotate с background-attachment: fixed( Может кто знает лекарство? Кажись где-то было, краем уха слышал

[rash]

По-моему у варианта Rash`a тоже есть проблемы с фоном)

Да и можно сделать проще ) И неоднородный фон в пролете, конечно.